<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>update</title>
    <style>
        .add {
            text-align: center;
            height: 300px;
            width: 380px;
            border: solid 2px red;
            margin: 0px auto;
        }

        td {
            text-align: right;
        }

        textarea {
            height: 30px;
            width: 155px;
        }

        select{
            width: 160px;
        }

        #startTime{
            width: 156px;
        }

    </style>


</head>

<body>
<div class="add">
    <form action="/updateActivity" method="post">
        <table>
            <tr>
                <td>
                    <input type="hidden" name="id" th:value="${act.id}">
                </td>
            </tr>
            <tr>
                <td>活动类型：*</td>
                <td>
                    <select id="type" name="type">
                        <option th:text="${act.type}"></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>活动开始时间：*</td>
                <td><input type="text" class="form-control input-medium" placeholder="开始时间" id="startTime" name="startTime" th:value="${act.startTime}" /></td>
            </tr>
            <tr>
                <td>活动时长（小时）：*</td>
                <td><input type="text" name="time" th:value="${act.time}"></td>
            </tr>
            <tr>
                <td>活动地点：*</td>
                <td><input type="text" name="place" th:value="${act.place}"></td>
            </tr>
            <tr>
                <td>活动人数：*</td>
                <td><input type="text" name="humanNum" th:value="${act.humanNum}"></td>
            </tr>
            <tr>
                <td>备注：</td>
                <td><textarea name="remark" id="" cols="30" rows="10" th:value="${act.remark}"></textarea></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="submit">保存</button>
                </td>

            </tr>
        </table>

    </form>
</div>
</body>
<script type="text/javascript" th:src="@{/date/jedate/jedate.js}"></script>
<script type="text/javascript">
    jeDate({
        dateCell: "#startTime",
        //format: "YYYY-MM-DD ", //控制是否显示小时
        format: "YYYY-MM-DD hh:mm:ss", //控制是否显示小时
        isTime: true
    })

    //时间选择
    var mydateInput = document.getElementById("startTime");
    var date = new Date();
    var dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "  " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    mydateInput.value = dateString;
</script>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.js}"></script>
<script>
    //页面在加载完毕事件---->onload
    $(function () {
        //发送请求获取所有的活动名称，
        $.ajax({
            type: "GET",//type:请求方式
            url: "http://localhost:8080/type",//请求的uri连接地址
            //proviences封装后台返回的JSON数据
            //success:请求成功的回调函数
            success: function (types) {
                //console.log(types);
                //proviences是一个集合，获取集合数据，
                //循环生成option标签，value属性值为城市名，显示的数据也是城市名
                for (var i = 0; i < types.length; i++) {
                    console.log(types[i]);
                    //返回的是List集合通过下标获取数据。
                    //如果返回的是map，根据key获取数据
                    //返回的city对象。根据city.属性名来获取数据
                    var option = $("<option></option>").text(types[i].type);
                    //生成value属性
                    console.log(types[i].type);
                    option.attr("value", types[i].type);
                    //将option添加到select标签中
                    $("#type").append(option);
                }
            }
        })
    })

</script>
</html>